<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #time {
            position: absolute;
            text-align: center;
            top: 10px;
            left: 50%;
            width: 100px;
            margin-left: -50px;
            color: yellow;
            font-size: 28px;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <div id="time"></div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({
            style: 'midnight'
        });

        var randomCount = 1000;

        var data = [];

        var cityData = [
            {city: '北京',time: 9, count: 100 * Math.random()},
            {city: '北京',time: 10, count: 100 * Math.random()},
            {city: '北京',time: 11, count: 100 * Math.random()},
            {city: '北京',time: 12, count: 100 * Math.random()},
            {city: '北京',time: 13, count: 100 * Math.random()},
            {city: '北京',time: 14, count: 100 * Math.random()},
            {city: '北京',time: 15, count: 100 * Math.random()},
            {city: '北京',time: 16, count: 100 * Math.random()},
            {city: '北京',time: 17, count: 100 * Math.random()},
            {city: '北京',time: 18, count: 100 * Math.random()},
            {city: '北京',time: 19, count: 100 * Math.random()},
            {city: '北京',time: 20, count: 100 * Math.random()},

            {city: '上海',time: 9, count: 100 * Math.random()},
            {city: '上海',time: 10, count: 100 * Math.random()},
            {city: '上海',time: 11, count: 100 * Math.random()},
            {city: '上海',time: 12, count: 100 * Math.random()},
            {city: '上海',time: 13, count: 100 * Math.random()},
            {city: '上海',time: 14, count: 100 * Math.random()},
            {city: '上海',time: 15, count: 100 * Math.random()},
            {city: '上海',time: 16, count: 100 * Math.random()},
            {city: '上海',time: 17, count: 100 * Math.random()},
            {city: '上海',time: 18, count: 100 * Math.random()},
            {city: '上海',time: 19, count: 100 * Math.random()},
            {city: '上海',time: 20, count: 100 * Math.random()},

            {city: '重庆',time: 9, count: 100 * Math.random()},
            {city: '重庆',time: 10, count: 100 * Math.random()},
            {city: '重庆',time: 11, count: 100 * Math.random()},
            {city: '重庆',time: 12, count: 100 * Math.random()},
            {city: '重庆',time: 13, count: 100 * Math.random()},
            {city: '重庆',time: 14, count: 100 * Math.random()},
            {city: '重庆',time: 15, count: 100 * Math.random()},
            {city: '重庆',time: 16, count: 100 * Math.random()},
            {city: '重庆',time: 17, count: 100 * Math.random()},
            {city: '重庆',time: 18, count: 100 * Math.random()},
            {city: '重庆',time: 19, count: 100 * Math.random()},
            {city: '重庆',time: 20, count: 100 * Math.random()},

            {city: '广州',time: 9, count: 100 * Math.random()},
            {city: '广州',time: 10, count: 100 * Math.random()},
            {city: '广州',time: 11, count: 100 * Math.random()},
            {city: '广州',time: 12, count: 100 * Math.random()},
            {city: '广州',time: 13, count: 100 * Math.random()},
            {city: '广州',time: 14, count: 100 * Math.random()},
            {city: '广州',time: 15, count: 100 * Math.random()},
            {city: '广州',time: 16, count: 100 * Math.random()},
            {city: '广州',time: 17, count: 100 * Math.random()},
            {city: '广州',time: 18, count: 100 * Math.random()},
            {city: '广州',time: 19, count: 100 * Math.random()},
            {city: '广州',time: 20, count: 100 * Math.random()},
        ];

        //添加其他城市数据
        var citys = ["天津","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
        citys.forEach(function(city) {
            for (var i = 9; i <= 20; i++) {
                cityData.push({city: city,time: i, count: 100 * Math.random()});
            }
        });

        // 构造数据
        cityData = cityData.map(function(item) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(item.city);
            item.geometry = {
                type: 'Point',
                coordinates: [cityCenter.lng, cityCenter.lat]
            }
            return item;
        });

        var dataSet = new mapv.DataSet(cityData);

        var options = {
            fillStyle: 'rgba(55, 50, 250, 0.2)',
            globalCompositeOperation: "lighter",
            size: 6,
            gradient: {
                0: 'blue',
                0.5: 'yellow',
                1: 'red'
            },
            max: 100,
            updateCallback: function(time) {
                $('#time').html(parseInt(time) + ':00');
            },
            animation: {
                type: 'time',
                stepsRange: {
                    start: 9,
                    end: 20
                },
                trails: 1,
                duration: 4,
            },
            draw: 'intensity'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
    </script>
	
</body>
</html>
